<template>
  <div class="header">
    <!-- 上方区域 -------------------------------------------------------------------------->
    <el-form
      ref="searchForm"
      :inline="true"
      :model="searchMap"
      style="margin-top: 15px;margin-left:20px;width:100%"
    >
      <el-form-item prop="spectrumName">
        曲谱名
        <el-input v-model="searchMap.spectrumName" placeholder style="width:200px;"></el-input>
      </el-form-item>
      <el-form-item prop="author">
        作者名
        <el-input v-model="searchMap.author" placeholder style="width:200px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-search" circle @click="find"></el-button>
        <!-- <el-button type="info" round @click="resetForm('searchForm')">重置</el-button> -->
        <!-- <el-button type="warning" round icon="el-icon-circle-plus-outline" @click="handleAdd">新增</el-button> -->
      </el-form-item>
      <el-dropdown>
        <div class="el-dropdown-link">
          <i class="el-icon-user"></i>:
          <!-- {{user.name}} -->
          admin
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a" icon="el-icon-edit-outline">修改密码</el-dropdown-item>
          <el-dropdown-item command="b" icon="el-icon-switch-button">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-form>

    <!-- 头部左侧Logo和标题 -->
    <!-- 头部右侧下拉菜单 -->
    <!-- <el-dropdown @command="handleCommand"> -->
    <!-- 修改密码弹出的部分 ---------------------------------------------------->
    <!-- <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px ">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="原密码" prop="oldPass">
          <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass" autocomplete="off">
          <el-input type="password" v-model.number="ruleForm.newPass"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="$refs['ruleForm'].resetFields()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>-->
  </div>
</template>
<script>
import spectrumApi from "@/api/spectrum";
import qs from "qs";
import PubSub from "pubsub-js";
import Bus from '@/bus'
export default {
  data() {
    return {
      //--------------------------------------------------控制对话框是否
      dialogFormVisible: false, // 控制新增对话框
      dialogVisible: false,
      //--------------------------------------------------新增对话框的数据绑定源
      form: {
        id: null, //增加id
        name: "",
        author: "",
        btype: 1,
        stype: 1
      },
      //----------------------------------------------点击搜索发送的默认分页对象

      current: 1, // 当前页, 默认第1页
      size: 5, // 每页显示条数， 10条},

      //---------------------------------------------搜索框
      searchMap: {
        current: 1, // 当前页, 默认第1页
        size: 5, // 每页显示条数， 10条},
        spectrumName: null,
        author: null
      },

      condition: {
        
      }
    };
  },
  methods: {
    //  上方查
    find() {
         // // var qspage = qs.stringify(this.page);
         console.log(this.searchMap)
     spectrumApi. findspectrums(this.searchMap).then(response => {
       const result = response.data;
       this.$router.push({ path: "/search" })
         Bus.$emit('click',result)
      });
    },
  

    // 表单重置，
    // 在 el-form-item 标签属性 prop 上, 指定了字段名, 重置才会生效
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getData();
    }
  }
};
</script>
<style scoped>
.header {
  background-image: url("hdbg.png");
}
/* 下拉菜单 */
.el-dropdown {
  float: right;
  margin-right: 40px;
  margin-top: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: black;
}
</style>